<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">小程序后台管理</div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="param.username" placeholder="用户名">
            <el-button slot="prepend" icon="el-icon-user" style="font-size:18px"></el-button>
            <!-- <template slot="prepend"><i class="el-icon-user"></i></template> -->
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model="param.password"
            @keyup.enter.native="submitForm()"
          >
            <el-button slot="prepend" icon="el-icon-key" style="font-size:18px"></el-button>
            <!-- <template slot="prepend"><i class="el-icon-key"></i></template> -->
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="验证码" v-model="param.code">
            <el-button slot="prepend" icon="el-icon-picture-outline" style="font-size:18px"></el-button>
            <!-- <template slot="prepend"><i class="el-icon-key"></i></template> -->
          </el-input>
          <canvas class="form-item-code" id="canvasCode" @click="drawCode()"></canvas>
          <!-- <img class="form-item-code" src="../assets/images/code.png" /> -->
          <!-- <img class="form-item-code" :src="param.codeImg" /> -->
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="userLogin()">登录</el-button>
        </div>
        <p class="login-tips">用户名和密码暂时随便填</p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { httpRequest, alertMessage } from "@/utils/api";
export default {
  data: function() {
    return {
      param: {
        username: "",
        password: "",
        code: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      showNum: [] //图片生成的验证码
    };
  },
  mounted: function() {
    this.draw(this.showNum);
  },
  methods: {
    userLogin() {
      // 用户登录
      this.$refs.login.validate(valid => {
        if (valid) {
          let codeTrans = this.showNum.join("").toLowerCase();
          console.log(this.param.code,"code-----")
          console.log(codeTrans,"codeTrans-----")
          if (this.param.code != codeTrans) {
            alertMessage(this, "验证码有误，请重新输入！", "4");
            return false;
          }
          var data = {
            username: this.param.username,
            password: this.param.password,
            code: this.param.code
          };
          httpRequest("post", "/item/admin002", data).then(res => {
            if (res.data.status === 1) {
              this.$message.success("登录成功");
              localStorage.setItem("ms_username", this.param.username);
              this.$router.push("/");
            } else {
              alertMessage(this, res.data.message, "4");
            }
          });
        } else {
          this.$message.error("请补全必填项");
          return false;
        }
      });
    },
    drawCode: function() {
      this.showNum.splice(0);
      this.draw(this.showNum);
    },
    draw: function(show_num) {
      //绘制 code 验证码
      var canvas_width = document.getElementById("canvasCode").clientWidth;
      var canvas_height = document.getElementById("canvasCode").clientHeight;
      var canvas = document.getElementById("canvasCode"); //获取到canvas的对象，演员
      var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt;
        var x = 10 + i * 18; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 22px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    },
    randomColor: function() {
      //得到随机的颜色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
  }
};
</script>

<style scoped>
.login-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/bg.jpg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
  color: #fff;
  font-weight: bold;
  /* border-bottom: 1px solid #ddd; */
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.ms-content {
  padding: 10px 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.form-item-code {
  position: absolute;
  border: 0px solid #ccc;
  border-radius: 5px;
  right: 2px;
  top: 2px;
  width: 86px;
  height: 36px;
}
</style>